<template>
    <div class="action-wrapper">
        <DataGrid :auto-load="autoLoad" border ref="dataGridRef" :pagination="false">
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form :model="queryData">
                        <el-form-item>
                            <el-input v-model="queryData.actionName" placeholder="行为名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.actionType" placeholder="调用方式" clearable>
                                <el-option
                                    v-for="(value, key) in thingActionType"
                                    :label="value"
                                    :key="key"
                                    :value="key"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column label="行为名称" fixed show-overflow-tooltip>
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="actionName" label="标识符" show-overflow-tooltip />
            <el-table-column label="调用方式">
                <template #default="{ row }">
                    {{ thingActionType[row.actionType] }}
                </template>
            </el-table-column>
            <el-table-column label="输入参数">
                <template #default="{ row }">
                    {{
                        Array.isArray(tryJsonParse(row.inputParam, []))
                            ? tryJsonParse(row.inputParam, [])
                                  .map(item => item.paramName)
                                  .join('; ')
                            : ''
                    }}
                </template>
            </el-table-column>
            <el-table-column label="输出参数">
                <template #default="{ row }">
                    {{
                        Array.isArray(tryJsonParse(row.outputParam, []))
                            ? tryJsonParse(row.outputParam, [])
                                  .map(item => item.paramName)
                                  .join('; ')
                            : ''
                    }}
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import type { SysMetadataObject, SysMetadataThingAction } from '@great/services';
import { IoTProductService } from '@great/services';
import { thingActionType } from '@/utils/constant';
import { DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox, tryJsonParse } from '@great/utils';
import ActionFormModal from '@/pages/model/thing/components/detail/thingModel/components/ActionFormModal.vue';

const attributeTypeList = inject<ComputedRef>('AttributeTypeList')!;

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
// 查询条件
const queryData = ref({
    queryObjectName: props.detailData?.objectName,
    actionName: '',
    actionType: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTProductService.getThingActionPage({
            ...queryData.value
        });
        return { data: res.data };
    }
});

function onViewItem(row: SysMetadataThingAction) {
    showPopupBox(ActionFormModal, {
        readOnly: true,
        detail: row,
        modelDetail: props.detailData!,
        attributeTypeList: attributeTypeList.value
    });
}
</script>
<style scoped lang="scss">
.action-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
